import React from 'react';
import { useHistory, useParams } from 'react-router-dom';
import { useGetCategoriesQuery } from '../../generated/graphql';

interface Props {}

function useCategoryIdParams() {
  const params = useParams<{ categoryId: string }>();
  return Number(params.categoryId);
}

export function CategoryPage({}: Props) {
  const history = useHistory();
  const categoryId = useCategoryIdParams();
  const categoriesQuery = useGetCategoriesQuery();
  const category = (categoriesQuery.data?.categories ?? []).find((c) => c._id === categoryId);
  return (
    <>
      <div className="flex flex-col ml-24 my-4 w-1/2 bg-white">
        {(category?.problems ?? []).map((p, i) => (
          <button
            className="appearance-none outline-none rounded-lg hover:bg-gray-100 active:bg-gray-200 text-black px-3 w-full py-5 text-left flex gap-4"
            onClick={() => {
              history.push('/problems/' + p._id);
            }}
          >
            <div className=" text-4xl">{i + 1}.</div>
            <div className="">
              <div className="text-lg flex items-center gap-2">
                {p.name}
                <div className="border rounded text-xs px-2 h-5 border-yellow-700 text-yellow-700">
                  JavaScript
                </div>
                <div className="border rounded text-xs px-2 h-5 border-purple-700 text-purple-700">
                  {category?.name}
                </div>
                {i <= 2 && (
                  <div className="border border-green-500 rounded text-xs px-2 h-5 bg-green-500 text-white">
                    简单
                  </div>
                )}
                {i <= 4 && i > 2 && (
                  <div className="border border-yellow-400 rounded text-xs px-2 h-5 bg-yellow-400 text-white">
                    中等
                  </div>
                )}
                {i > 4 && (
                  <div className="border border-red-400 rounded text-xs px-2 h-5 bg-red-400 text-white">
                    困难
                  </div>
                )}
              </div>
              <div className="text-gray-500">{p.content}</div>
            </div>
          </button>
        ))}
      </div>
    </>
  );
}
